<#include '/admin/sonheader.html' >
<link href="${ctx}/statics/js/common/zTreeStyle/zTreeStyle.css"
	rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx}/adminthemes/version3/datatables/jquery.dataTables.min.js "></script>
	<script type="text/javascript" src="${ctx}/adminthemes/version3/datatables/dataTables.bootstrap.js "></script>
	<link rel="stylesheet"  href="${ctx}/adminthemes/version3/datatables/dataTables.bootstrap.css" />
    <link rel="stylesheet"  href="${ctx}/adminthemes/version3/datatables/jquery.dataTables.min.css" />

<link rel="stylesheet" href="../css/list.css" />
<link rel="stylesheet" href="../css/demo.css" />
<style>
.article {
	float: right;
	margin-right: 40px;
}

.paperbox{
	margin-left: 10px;
}

td{
	text-align: center;
}

#goods_data tr th {
	text-align: center;
}
</style>

<div class="admin-main" >
	<!--  <div style="padding-left: 200px;">
		<input type="text" name="keyword" style="width: 300px; height: 30px;"
			placeholder="请输入标题" autocomplete="off" class="layui-input keyword">
		<button class="layui-btn-primary layui-btn layui-btn-small" id="search">
			<i class="layui-icon">&#xe615;</i>
		</button>
	</div>-->
	<div class="paperbox"
		style="width: 130px;; height:300px; white-space: nowrap; overflow: scroll">
		<!-- //插件 -->
		<div class="node">
			<div class="zTreeDemoBackground left">
				<ul id="tree_goods" class="ztree"></ul>
			</div>
		</div>
	</div>
	<div class="article" style="white-space: nowrap;overflow: scroll; height: 300px;">
		<!-- 表格-->
			<div class="list-form">
				<table id="goods_data" class="layui-table site-table table-hover" style="width: 900px;"  lay-skin="line">
					<thead >
						<tr>
							<th></th>
							<th>编号</th>
							<th>名称</th>
							<th>价格</th>
							<th>规格</th>
							<th>库存量</th>
							
						</tr>
					</thead>
				</table>
			</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		var setting = {
			view : {
				showIcon : showIconForTree
			},
			async : {
				enable : true,
				url : ctx + "/shop/admin/goods-select/list-json.do",
				autoParam : [ "cat_id" ]
			},
			callback : {
				onClick: zTreeOnClick
			}
		};
		$.fn.zTree.init($("#tree_goods"), setting);
	});

	function showIconForTree(treeId, treeNode) {
		return !treeNode.isParent;
	};
	
	function zTreeOnClick(event, treeId, treeNode){
		
		var table = $('#goods_data').DataTable({
			"language": {
		        "url": "${staticserver}/media/zh_CN.txt"
		    },
		    "info": false,
		    "paging":false,
		    "processing": true,
		    "serverSide": true,
		    "ordering": false,
		    "searching": false,
		    "lengthChange": false,
		    "destroy": true,
		    "autoWidth":false,
		    ajax: {
		        //指定数据源
		        async:false,
		        type:"post",
		        url: '${ctx}/shop/admin/goods-select/list-product-by-cat-id.do?catid='+treeNode.cat_id,
		    },
		    columns: [ //定义列
		           {"data": function (obj) {
		               return '<input type="checkbox" name="checkbox" class="fly-checkbox">';
		           }}, 
		           {"data": function (obj) {
	                	return '<span id="sn">'+obj.sn+'</span>';
	               	}}, 
	               	{"data": function (obj) {
	                	return '<span id="name">'+obj.name+'</span>';
	               	}},
	               	{"data": function (obj) {
	                	return '<span id="price">'+obj.price+'</span>';
	               	}},
	               	{"data": function (obj) {
	               		if(obj.specs == null){
	               			return '<span id="specs"></span>';
	               		}else{
	               			return '<span id="specs">'+obj.specs+'</span>';
	               		}
	                	
	               	}},
	               	{"data": function (obj) {
	                	return '<span id="store">'+obj.store+'</span>';
	               	}},
		   	   	   	{"data": function (obj) {
	                	return '<input type="hidden"  name="goods_id" value='+obj.goods_id+'>';
	               	}}, 
	               	{"data": function (obj) {
			              return '<input type="hidden"  name="product_id" value='+obj.product_id+'>';
			        }}
		     ]
		});
	}
	

	$('.admin-main').on('click', 'tr', function(){
		$(this).addClass('selected')
			   .siblings().removeClass('selected').find('.fly-checkbox').prop('checked', false)
	})

</script>
